<template>
  <div 
  v-if="cartData"
  :class="['cart-wrap', empty ? 'empty' : '']" >
      <div 
      :style='"background: url("+cartTopBg+") no-repeat center"'
      class="cart-top" >
            <div class="cart-title" >购物车</div>
            <div 
            v-if="!empty"
            @click="handleToChangeType"
            class="cart-edit" >{{ isDel ? '完成' : '管理' }}</div>
      </div>


        <div v-if="empty"  class="shop-good-box" >
            <!-- 空 -->
            <div class="empty-good" >
                <van-empty description="暂无加购商品" />
            </div>
        </div>
        <div v-else class="shop-good-box" >
            <!-- 正常商品 -->
            <div
            v-for="(item, index) in normalGoodList"
            :key="'shop' + index"
            class="shop-good"
            >
                <div class="shop-top" >
                    <img
                    @click="handleToShopSelect(item, index)"
                    class="shop-top-select" :src="item.selected ? defaultTagIcon : cartCircleIcon" alt="">
                    <img @click="handleToShop(item)" class="shop-top-icon" :src="orderShopIcon" alt="">
                    <div @click="handleToShop(item)" class="shop-top-name" >{{ item.shop_name }}</div>
                    <img @click="handleToShop(item)" class="shop-top-arrow" :src="shopGoodArrow" alt="">
                </div>

                <div class="good-ul" >
                    <div 
                    v-for="(pItem, pIndex) in item.items"
                    :key="pItem.id"
                    class="good-li" >
                        <img 
                        @click="handleToGoodSelect(pItem, index, pIndex)"
                        class="shop-top-select" :src="pItem.selected ? defaultTagIcon : cartCircleIcon" alt="">
                        <img @click="handleToGood(pItem)" class="good-item" :src="pItem.goods_cover_url" alt="">
                        <div class="good-item-content" >
                            <div class="good-name" >
                                {{ pItem.goods_name }}
                            </div>
                            <div class="good-sku" >
                                {{ pItem.spec_key_name }}
                            </div>
                            <!-- <div class="good-subsity" >
                                 {{ pItem.subsidy_text }}
                            </div> -->
                    <div class="good-info-subsidy" v-if="pItem.labels.length>0">
                        <!-- <img v-if="items.icon_type!=0" :src="items.icon_type==1?require('../../images/xiaofei.png'):require('../../images/huaduo.png')" alt=""> -->
				<div class="good-info-subsidy-btn" :style="{background:transparent,color:items.color}" v-for="items,indexs in pItem.labels" :key="indexs">
					{{ items.name }}</div>
			</div>
            <div class="good-sku" style="text-decoration: line-through;">{{ pItem.price_text_original }}</div>
                            <div class="good-price" >
                                ¥{{ pItem.price }}
                            </div>
                        </div>

                        <!-- 步进器 -->
                        <div 
                        v-if="!isDel"
                        class="step-box" >
                            <van-stepper 
                            v-model="pItem.quantity"
                            @change="handletoChangeStep($event, index, pIndex)"
                            />
                        </div>
                        <!-- 删除标记 -->
                        <div 
                        v-if="isDel" 
                        class="del-icon" 
                        @click="handleToDel(pItem)"
                        ></div>
                        
                    </div>
                </div>

            </div>

            <!-- 失效商品 -->
            <div
            v-for="(item, index) in validGoodList"
            :key="'valid' + index"
            class="shop-good"
            >
                <div class="shop-top" >
                    <img 
                    @click="handleToValidShopSelect(item, index)"
                    class="shop-top-select" :src="!item.allowSelect ? cartNoSelect : (item.selected ? defaultTagIcon : cartCircleIcon)" alt="">
                    <img @click="handleToShop(item)" class="shop-top-icon" :src="orderShopIcon" alt="">
                    <div @click="handleToShop(item)" class="shop-top-name" >{{ item.shop_name }}</div>
                    <img @click="handleToShop(item)" class="shop-top-arrow" :src="shopGoodArrow" alt="">
                </div>

                <div class="good-ul" >
                    <div 
                    v-for="(pItem, pIndex) in item.items"
                    :key="pItem.id"
                    class="good-li" >
                        <div class="valid-bg" ></div>
                        <div class="shop-valid-tag" >商品下架</div>
                        <img 
                        @click="handleToValidGoodSelect(pItem, index, pIndex)"
                        class="shop-top-select"  :src="!pItem.allowSelect ? cartNoSelect : (pItem.selected ? defaultTagIcon : cartCircleIcon)" alt="">
                        <img class="good-item" :src="pItem.goods_cover_url" alt="">
                        <div class="good-item-content" >
                            <div class="good-name" >
                                {{ pItem.goods_name }}
                            </div>
                            <div class="good-sku" >
                                {{ pItem.spec_key_name }}
                            </div>
                            <div class="good-subsity" >
                                {{ pItem.subsidy_text }}
                            </div>
                            <div class="good-info-subsidy" v-if="pItem.labels.length>0">
                        <!-- <img v-if="items.icon_type!=0" :src="items.icon_type==1?require('../../images/xiaofei.png'):require('../../images/huaduo.png')" alt=""> -->
				<div class="good-info-subsidy-btn" :style="{background:transparent,color:items.color}" v-for="items,indexs in pItem.labels" :key="indexs">
					{{ items.name }}</div>
			</div>
            <div class="good-sku" style="text-decoration: line-through;">{{ pItem.price_text_original }}</div>
                            <div class="good-price" >
                                ¥{{ pItem.price }}
                            </div>
                        </div>
                         <!-- 删除标记 -->
                        <div v-if="isDel" class="del-icon" ></div>
                    </div>
                </div>

            </div>
        </div>

        

        <!-- 结算 -->
        <div 
        v-if="!empty"
        class="cart-cash-bottom-box" >
            <div 
            @click="handleToAll"
            class="cart-all-select" >
                <img class="cart-select-icon" :src="isAll ? defaultTagIcon : cartCircleIcon" alt="">
                <div class="cart-select-label" >全选</div>
            </div>
            <div class="cart-all-price" >
                <div v-if="!isDel" class="cart-all-label" >合计：</div>
                <div v-if="!isDel" class="cart-all-pay" >¥{{ totalPrice }}</div>
                <div @click="handleToSubmit" class="cart-all-btn active-btn" >{{ isDel ? '删除' : '结算' }}</div>
            </div>
        </div>
        <footTab :current="2" ></footTab>

        <van-popup v-model="showModel" round >
			<div class="popup-box" >
				<div class="popup-box-title" >确认将该商品删除？</div>
				<div class="popup-btn" >
					<div @click="showModel = false" class="popup-btn-cancel active-btn" >取消</div>
					<div @click="handleToClear" class="popup-btn-confirm active-btn" >确定</div>
				</div>
			</div>
		</van-popup>

  </div>
</template>

<script>
import { 
    cartTopBg, defaultTagIcon, cartCircleIcon, 
    orderShopIcon, shopGoodArrow, cartNoSelect 
} from '@/tool/static-img';
import { CART, CART_UPDATE, CART_DEL } from '@/api/cart';
import footTab from '@/components/foot-tab';
export default {
    components: {
        footTab
    },
    data() {
        return {
            cartTopBg, defaultTagIcon, cartCircleIcon,
            orderShopIcon, shopGoodArrow, cartNoSelect,
            cartData: null,
            // 正常商品
            normalGoodList: [],
            // 删除单体
            delId: '',
            // 失效商品
            validGoodList: [],
            allPrice: 0,
            empty: false,
            isAll: false,
            isDel: false,
            showModel: false,
            btnLoad: false
        }
    },
    created() {

        if(!this.isLogin()) {
            return
        }

        // 购物车信息 
        this.getCartData();

    },
    methods: {
        // 是否登录
        isLogin() {
            const token = localStorage.getItem('token');
            if(!token) {
                this.$router.push({
                    name: 'login'
                })
                return false;
            }

            return true;
        },
        // 去商品详情
        handleToGood(item) {
            this.$router.push({
                name: 'good',
                query: {
                    id: item.goods_id
                }
            })
        },
        // 购物车信息
        getCartData() {
            this.$http.get(CART)
                .then(res => {
                    const {
                        data
                    } = res;

                    this.cartData = data;
                    this.empty = false;

                    if(!data || !data.list || !data.list.length) {
                        this.empty = true
                        return
                    }

                    // 正常 - 失效商品
                    this.getGoodDataType();
                })
        },
        // 商品拆分 - 数据处理
        getGoodDataType() {
            let normalGoodList = [], validGoodList = [];

            this.cartData.list.forEach(item => {

                let normalItems = [], validItems = [];
                item.items.forEach(pItem => {
                    
                    if(pItem.spec_exist) {
                        // 存在
                        pItem.allowSelect = true;
                        normalItems.push(pItem)
                    }else {
                        pItem.allowSelect = this.isDel;
                        validItems.push(pItem)
                    }
                })

                if(normalItems.length) {
                    normalGoodList.push({
                        shop_id: item.shop_id,
                        shop_name: item.shop_name,
                        selected: false,
                        allowSelect: true,
                        items: normalItems
                    })
                }
                

                if(validItems.length) {
                    validGoodList.push({
                        shop_id: item.shop_id,
                        shop_name: item.shop_name,
                        selected: false,
                        allowSelect: this.isDel,
                        items: validItems
                    })
                }
                
            })

            this.normalGoodList = normalGoodList;
            this.validGoodList = validGoodList;

            // 勾选情况
            this.selectGoodChange();
            // 价格计算
            this.computeAllPrice();
        },
        handleToShop(item) {
			localStorage.setItem('shopInfoName', item.shop_name)
            this.$router.push({
                name: 'shopInfo'
            })
        },
        // 删除模式切换
        handleToChangeType() {
            this.isDel = !this.isDel;
            const validGoodListClone = JSON.parse(JSON.stringify(this.validGoodList));
                  validGoodListClone.forEach(item =>{
                      item.allowSelect = this.isDel;
                      item.items.forEach(pItem => {
                          pItem.allowSelect = this.isDel;
                      })
                  })
            this.validGoodList = validGoodListClone;


            this.selectGoodChange();
        },
        // 店铺总勾选 - 正常商品
        handleToShopSelect(item, index) {
            if(!item.allowSelect) {
                return
            }

            let items = [];
            const isSelect = item.selected;
            const normalGoodListClone = JSON.parse(JSON.stringify(this.normalGoodList));
                  normalGoodListClone[index].items.forEach(item => {
                      items.push({
                          cart_id: item.id,
                          quantity: item.quantity,
                          selected: !isSelect ? 1 : 0
                      })
                  })

            this.updateCart(items);
        },
        // 店铺总勾选 - 失效商品
        handleToValidShopSelect(item, index) {
            if(!item.allowSelect) {
                return
            }

            let items = [];
            const isSelect = item.selected;
            const validGoodListClone = JSON.parse(JSON.stringify(this.validGoodList));
                  validGoodListClone[index].items.forEach(item => {
                      items.push({
                          cart_id: item.id,
                          quantity: item.quantity,
                          selected: !isSelect ? 1 : 0
                      })
                  })

            this.updateCart(items);
        },
        // 商品子勾选
        handleToGoodSelect(pItem, index, pIndex) {
            if(!pItem.allowSelect) {
                return
            }
            const isSelect = pItem.selected;
            let items = [{
                cart_id: pItem.id,
                quantity: pItem.quantity,
                selected: !isSelect ? 1 : 0
            }];

            this.updateCart(items);
        },
        // 失效商品子勾选
        handleToValidGoodSelect(pItem, index, pIndex) {
            if(!pItem.allowSelect) {
                return
            }
            
            const isSelect = pItem.selected;
            let items = [{
                cart_id: pItem.id,
                quantity: pItem.quantity,
                selected: !isSelect ? 1 : 0
            }];

            this.updateCart(items);
        },
        // 全选
        handleToAll() {
            this.isAll = !this.isAll;

            let selectItems = [];

            this.normalGoodList.forEach(item => {
                item.items.forEach(pItem => {
                    if(pItem.allowSelect) {
                        selectItems.push({
                            cart_id: pItem.id,
                            quantity: pItem.quantity,
                            selected: this.isAll ? 1 : 0
                        })
                    }
                })
            }) 

            this.validGoodList.forEach(item => {
                item.items.forEach(pItem => {
                    if(pItem.allowSelect) {
                        selectItems.push({
                            cart_id: pItem.id,
                            quantity: pItem.quantity,
                            selected: this.isAll ? 1 : 0
                        })
                    }
                })
            }) 

            if(!selectItems.length) {
                return
            }
            

            this.updateCart(selectItems);
        },
        // 步进器
        handletoChangeStep(data, index, pIndex) {
            const items = [{
                cart_id: this.normalGoodList[index].items[pIndex].id,
                quantity: data,
                selected: this.normalGoodList[index].items[pIndex].selected ? 1 : 0
            }]


            this.updateCart(items);
        },
        // 选中效果
        selectGoodChange() {
            if(!this.isDel) {

                // 店铺
                this.normalGoodList.forEach(item => {

                    const isShopSelect = item.items.every(pItem => {
                        return pItem.selected
                    })

                    item.selected = isShopSelect;
                })


                // 正常
                const isAll = this.normalGoodList.every(item => {
                    return item.selected
                })
                

                this.isAll = this.normalGoodList.length && isAll;
                this.computeAllPrice();
            }else {
                // 店铺
                this.normalGoodList.forEach(item => {

                    const isShopSelect = item.items.every(pItem => {
                        return pItem.selected
                    })

                    item.selected = isShopSelect;
                })
                this.validGoodList.forEach(item => {

                    const isShopSelect = item.items.every(pItem => {
                        return pItem.selected
                    })

                    item.selected = isShopSelect;
                })

                // 失效
                const isNormalAll = this.normalGoodList.every(item => {
                    return item.selected
                })
                const isValidAll = this.validGoodList.every(item => {
                    return item.selected
                })
                

                this.isAll = isNormalAll && isValidAll;
            }

        },
        // 购物车更新
        updateCart(items) {
            this.$http.post(CART_UPDATE, {
                items
            })
                .then(res => {
                    const {
                        data
                    } = res;

                    this.cartData = data;
                    this.empty = false;

                    if(!data || !data.list || !data.list.length) {
                        this.empty = true
                        return
                    }

                    // 正常 - 失效商品
                    this.getGoodDataType();
                })
        },
        // 价格计算
        computeAllPrice() {
            let totalPrice = 0;
            this.normalGoodList.forEach(item => {
                item.items.forEach(pItem => {
                    if(pItem.selected) {
                        totalPrice += pItem.price * pItem.quantity;
                    }
                })
            })

            this.totalPrice = totalPrice.toFixed(2);
        },
        // 单体删除
        handleToDel(item) {
            this.showModel = true;

            this.delId = item.id;
        },
        // 结算 - 删除
        handleToSubmit() {
            if(!this.isDel) {
                // 结算
                let hasSelect = false;
                this.normalGoodList.forEach(item => {
                    item.items.forEach(pItem => {
                        if(pItem.selected) {
                            hasSelect = true;
                        }
                    })
                })

                if(!hasSelect) {
                    this.$toast('请选择')
                    return
                }

                localStorage.setItem('orderItem', JSON.stringify({
					from_cart: 1
				}))

				this.$router.push({
					name: 'order'
				})
            }else {
                // 删除
                let hasSelect = false;
                this.normalGoodList.forEach(item => {
                    item.items.forEach(pItem => {
                        if(pItem.selected) {
                            hasSelect = true;
                        }
                    })
                })
                this.validGoodList.forEach(item => {
                    item.items.forEach(pItem => {
                        if(pItem.selected) {
                            hasSelect = true;
                        }
                    })
                })

                // 清除单体记录
                this.delId = '';


                if(!hasSelect) {
                    this.$toast('请选择')
                    return
                }

                this.showModel = true;

            }
        },
        // 删除
        handleToClear() {
            let params = [];

            if(this.delId) {
                params.push(this.delId);
            }else {
                this.normalGoodList.forEach(item => {
                    item.items.forEach(pItem => {
                        if(pItem.selected) {
                            params.push(pItem.id);
                        }
                    })
                })
                this.validGoodList.forEach(item => {
                    item.items.forEach(pItem => {
                        if(pItem.selected) {
                            params.push(pItem.id);
                        }
                    })
                })
            }

            if(this.btnLoad) {
                return
            }
            this.btnLoad = true;

            this.$http.post(CART_DEL, {
                 cart_ids: params
            })
            .then((res) => {
                const {
                    data
                } = res;

                this.cartData = data;
                this.empty = false;

                if(!data || !data.list || !data.list.length) {
                    this.empty = true
                    return
                }

                // 正常 - 失效商品
                this.getGoodDataType();
                this.$toast.success('删除成功');
            })
            .finally(() => {
                this.showModel = false;
                setTimeout(() => {
                    this.btnLoad = false;
                }, 500)
            })

        }
        
    }


}

</script>
<style lang="scss" scoped>
    .cart-wrap{
        min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: calc(2.1rem + constant(safe-area-inset-bottom));
		padding-bottom: calc(2.1rem + env(safe-area-inset-bottom));
		box-sizing: border-box;
		&.empty{
			background-color: #ffffff;
		}
        .cart-top{
            display: flex;
            justify-content: space-between;
            height: 1.8rem;
            width: 100%;
            padding-top: 0.28rem;
            box-sizing: border-box;
            .cart-title{
                position: relative;
                height: 0.56rem;
                margin-left: 0.28rem;
                line-height: 0.56rem;
                font-size: 0.4rem;
                font-weight: 500;
                color: #333333;
                &::before{
                    position: absolute;
                    left: 0;
                    bottom: 0.04rem;
                    content: '';
                    width: 1.2rem;
                    height: 0.14rem;
                    background: linear-gradient( 90deg, #468DFF 0%, rgba(63,137,255,0) 100%);
                }
            }
            .cart-edit{
                height: 0.4rem;
                margin-top: -0.28rem;
                padding-top: 0.36rem;
                padding-bottom: 0.4rem;
                padding-right: 0.32rem;
                padding-left: 0.32rem;
                line-height: 0.4rem;
                font-weight: 400;
                font-size: 0.28rem;
                color: #333333;
            }
        }
        .empty-good{
            margin-top: -0.64rem;
            margin-bottom: 0.16rem;
            padding-bottom: 2rem;
            background: #fff;
            border-radius: 0.16rem;
        }
        .shop-good-box{
            margin-top: -0.64rem;
            margin-bottom: 0.16rem;
            
        }
        .shop-good{

            margin-bottom: 0.16rem;
            border-radius: 0.16rem;
            background: #ffffff;

            .shop-top{
                display: flex;
                align-items: center;
                width: 100%;
                height: 0.88rem;
                border-bottom: 1px solid rgba(227, 227, 227, 0.5); 
                .shop-top-select{
                    width: 0.3rem;
                    height: 0.3rem;
                    padding: 0.24rem;
                }
                .shop-top-icon{
                    width: 0.4rem;
                    height: 0.4rem;
                }
                .shop-top-name{
                    max-width: 3rem;
                    height: 0.4rem;
                    padding-left: 0.16rem;
                    padding-right: 0.08rem;
                    line-height: 0.4rem;
                    font-weight: 400;
                    font-size: 0.28rem;
                    color: #333333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                .shop-top-arrow{
                    width: 0.32rem;
                    height: 0.32rem;
                }
            }
        }

        .good-ul{
            padding: 0.32rem 0.24rem 0.32rem 0;
            .good-li{
                position: relative;
                display: flex;
                align-items: center;
                margin-bottom: 0.72rem;
                &:last-child{
                    // margin-bottom: 0;
                }
                .valid-bg{
                    position: absolute;
                    left: 0.78rem;
                    width: 1.76rem;
                    height: 1.76rem;
                    background: rgba(0, 0, 0, 0.2);
                    border-radius: 0.16rem;
                }
                .del-icon{
                    position: absolute;
                    right: 0.16rem;
                    bottom: 0.04rem;
                    width: 0.36rem;
                    height: 0.36rem;
                    border-radius: 50%;
                    background: #F9301B;
                    &::before{
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        content: '';
                        width: 0.2rem;
                        height: 0.04rem;
                        background: #ffffff;
                        border-radius: 0.02rem;
                    }
                }
                .step-box{
                    position: absolute;
                    right: 0;
                    bottom: -.5rem;
                    .van-stepper__minus{
                        width: 0.36rem;
                        height: 0.36rem;
                    }
                    .van-stepper__plus{
                        width: 0.36rem;
                        height: 0.36rem;
                    }
                    ::v-deep .van-stepper__input{
                        background: transparent !important;
                    }
                }
                .shop-valid-tag{
                    position: absolute;
                    left: 1.04rem;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.28rem;
                    height: 0.48rem;
                    font-weight: 500;
                    font-size: 0.24rem;
                    color: #ffffff;
                    border-radius: 0.24rem;
                    background: rgba(51, 51, 51, 0.9);
                }
                .shop-top-select{
                    width: 0.3rem;
                    height: 0.3rem;
                    padding: 0.24rem;
                }
                .good-item{
                    width: 1.76rem;
                    height: 1.76rem;
                    border-radius: 0.16rem;
                }
                .good-item-content{
                    width: 4.2rem;
                    height: 1.76rem;
                    margin-left: 0.24rem;
                    .good-name{
                        height: 0.4rem;
                        margin-bottom: 0.04rem;
                        line-height: 0.4rem;
                        font-size: 0.28rem;
                        font-weight: 500;
                        line-height: 0.4rem;
                        color: #333333;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                    .good-sku{
                        height: 0.34rem;
                        line-height: 0.34rem;
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: #999999;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                    .good-subsity{
                        height: 0.34rem;
                        margin-bottom: 0.04rem;
                        margin-top: 0.16rem;
                        line-height: 0.34rem;
                        font-size: 0.24rem;
                        color: #FF6200;
                    }
                    .good-price{
                        height: 0.44rem;
                        line-height: 0.44rem;
                        font-size: 0.32rem;
                        font-weight: 500;
                        color: #F32A23;
                    }
                }
            }
        }

        .cart-cash-bottom-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 1rem;
            left: 0;
            height: 0.96rem;
            width: 100%;
            background: #ffffff;
            .cart-all-select{
                display: flex;
                align-items: center;
                .cart-select-icon{
                    width: 0.3rem;
                    height: 0.3rem;
                    padding: 0.24rem;
                }
                .cart-select-label{
                    font-size: 0.28rem;
                    font-weight: 500;
                    color: #333333;
                }
            }
            .cart-all-price{
                display: flex;
                align-items: center;
                .cart-all-label{
                    font-weight: 500;
                    font-size: 0.24rem;
                    color: #333333;
                }
                .cart-all-pay{
                    margin-right: 0.24rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #F32A23;
                }
                .cart-all-btn{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 2.08rem;
                    height: 0.72rem;
                    margin-right: 0.24rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #ffffff;
                    border-radius: 0.36rem;
                    background: linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%);
                }
            }
        }


        .popup-box{
			width: 5.74rem;
			height: 3.08rem;
			padding-top: 0.72rem;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0.16rem;
			.popup-box-title{
				height: 0.44rem;
				margin-bottom: 0.72rem;
				line-height: 0.44rem;
				font-size: 0.32rem;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.popup-btn{
				display: flex;
				justify-content: space-between;
				padding: 0 0.32rem;
				.popup-btn-cancel{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2.4rem;
					height: 0.8rem;
					font-weight: 400;
					font-size: 0.32rem;
					color: #333333;
					border-radius: 0.4rem;
					border: 0.02rem solid #E3E3E3;
					box-sizing: border-box;
				}
				.popup-btn-confirm{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2.4rem;
					height: 0.8rem;
					font-size: 0.32rem;
					font-weight: 400;
					color: #fff;
					background: linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%);
					border-radius: 0.4rem;
				}
			}
			
		}
		
		.van-popup--center.van-popup--round{
			border-radius: 0.16rem;
		}
    }
    .good-info-subsidy {
			// display: flex;
			// height: 0.36rem;
			// margin-top: 0.12rem;
			margin-bottom: 0.16rem;
            height:.8rem;
            display: inline-block;
			.good-info-subsidy-btn {
				img {
					width: .32rem;
					height: .32rem;
					// vertical-align: middle;
				}

				width: 100%;
				display: flex;
				margin-top: .08rem;
				// background: url('../../../images/bg_butie.png') no-repeat center;
				// background: #fcf0ef;
				color: #F32A23;
				// opacity: 0.07;
				background-size: cover;
				align-items: center;
				// justify-content: center;
				height: 0.36rem;
				// padding: 0 0.1rem;
				font-weight: 400;
				font-size: 0.22rem;
				border-radius: 0.06rem;
				text-indent: .04rem;
				box-sizing: border-box;
			}
			.hd_bt{
				background: #fdf4ee;
				color: #FF6200;
			}
		}
</style>